<template>
  <div class="mod-config">
    <el-form ref="dataForm" label-width="120px">
      <el-row :gutter="30">
        <el-col :span="24">
          <el-button size="mini" icon="el-icon-right" @click="after">添加规格</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col>
          <div v-for="tag in standars" :key="tag.Id" type="success" class="container">
            <el-tag type="success">{{ tag.name }}</el-tag>
            <el-link type="danger" :underline="false">删除</el-link>
            <el-row>
              <el-col>
                <el-tag
                  v-for="val in tag.value"
                  :key="val"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(val)"
                >
                  {{ val }}
                </el-tag>
                <el-input
                  v-if="tag.inputVisible"
                  :id="tag.Id"
                  v-model="tag.templatevalue"
                  class="input-new-tag "
                  size="small"
                  @keyup.enter.native="handleInputConfirm(tag)"
                  @blur="handleInputConfirm(tag)"
                />
                <el-button v-else class="button-new-tag" size="small" @click="showInput(tag)">新建</el-button>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form v-if="isShow" ref="form" :model="formData" label-width="80px">
            <el-form-item label="规格名称">
              <el-select v-model="formData.standarName" placeholder="请选择规格名称" @change="selectName">
                <el-option label="内存" value="memory" />
                <el-option label="CPU" value="cpu" />
              </el-select>
            </el-form-item>
            <el-form-item label="规格值">
              <el-select v-model="formData.standarValue" multiple placeholder="请选择规格名称" @change="selectVal">
                <el-option label="2G" value="2G" />
                <el-option label="4G" value="4G" />
                <el-option label="8G" value="8G" />
                <el-option label="16G" value="16G" />
              </el-select>
            </el-form-item>
            <el-form-item justify="end">
              <el-button size="mini" type="primary" @click="onSubmit">确认</el-button>
              <el-button size="mini" @click="isShow = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column v-for="(column, index) in standarsColumns" :key="index" :prop="column.prop " :label="column.label" />

          </el-table>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    categoryId: {
      required: true,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShow: false,
      formData: {
        standarName: '',
        standarLabel: '',
        standarValue: []
      },
      standars: [{
        name: '颜色',
        Id: 'Color',
        inputVisible: false,
        templatevalue: '',
        value: ['红色', '绿色', '黄色']
      }, {
        name: '尺寸',
        Id: 'Size',
        inputVisible: true,
        templatevalue: '',
        value: ['M', 'L', 'XL', 'XXL']
      }],
      standarsColumns: [],
      tableData: [],
      fixedColumns: [{
        label: '重量',
        prop: 'weight'
      }, {
        label: '体积',
        prop: 'tiji'
      }]
    }
  },
  created() {
    alert(this.categoryId)
  },
  methods: {
    after() {
      this.isShow = true
    },
    selectName(val) {
      this.formData.standarLabel = '内存'
    },
    selectVal(val) {

    },
    onSubmit() {
      const result = {
        Id: this.formData.standarName,
        name: this.formData.standarLabel,
        inputVisible: false,
        templatevalue: '',
        value: this.formData.standarValue
      }
      this.standars.push(result)
      this.isShow = false
      this.formData = {}
      let cartesian = []
      // 设置列
      this.standars.forEach((data, index) => {
        // 增加列
        const val = {
          'label': data.name,
          'prop': data.Id
        }
        this.standarsColumns.unshift(val)
      })
      this.fixedColumns.forEach((data, index) => {
        this.standarsColumns.push(data)
      })
      // 设置行
      this.standars.forEach((data, index) => {
        if (index === 0) {
          cartesian = data.value
        } else {
          cartesian = this.cartesianProductOf(cartesian, data.value)
        }
      })
      if (cartesian) {
        this.tableData = this.setPropertyValue(this.standars, cartesian, this.fixedColumns)
        console.log(this.tableData)
      }
    },
    showInput(tag) {
      alert(this.categoryId)
      tag.inputVisible = true
      this.$nextTick(_ => {
        document.getElementById(tag.Id).focus()
      })
    },
    handleClose(val) {
      console.log('hello world !!')
    },
    handleInputConfirm(tag) {
      if (tag.templatevalue) {
        tag.value.push(tag.templatevalue)
      }
      tag.inputVisible = false
      tag.templatevalue = ''
      let cartesian = []
      // 设置行
      this.standars.forEach((data, index) => {
        if (index === 0) {
          cartesian = data.value
        } else {
          cartesian = this.cartesianProductOf(cartesian, data.value)
        }
      })
      if (cartesian) {
        this.tableData = this.setPropertyValue(this.standars, cartesian, this.fixedColumns)
        console.log(this.tableData)
      }
    },
    setPropertyValue(arrStandars, arrCartesian, arrFixedCols) {
      const result = []
      if (arrCartesian != null) {
        arrCartesian.forEach((data, index) => {
          const r = {}
          arrStandars.forEach((stand, i) => {
            r[stand.Id] = data[i]
          })
          arrFixedCols.forEach((data, index) => {
            r[data.prop] = ''
          })
          result.push(r)
        })
      }
      return result
    },
    /*
    function calcDescartes(array) {
      if (array.length < 2) return array[0] || [];

      return array.reduce((total, currentValue) => {
        let res = [];

        total.forEach(t => {
          currentValue.forEach(cv => {
            if (t instanceof Array) 	// 或者使用 Array.isArray(t)
              res.push([...t, cv]);
            else
              res.push([t, cv]);
          })
        })
        return res;
      })
    }
    */
    cartesianProductOf(a, b) {
      const res = []
      a.forEach((data, index) => {
        b.forEach((b, index) => {
          if (data instanceof Array) {
            res.push([...data, b])
          } else {
            res.push([data, b])
          }
        })
      })
      return res
      /* return Array.prototype.reduce(function(a, b) {
        var ret = []
        a.forEach(function(a) {
          b.forEach(function(b) {
            console.log(b)
            ret.push(a.concat([b]))
          })
        })
        return ret
      }, [[]]) */
    }
  }
}
</script>
<style scoped>
.container {
  margin: 10px;
}
.container span {
  line-height: 40px;
  height: 40px;
  border: 1px;
}
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
